<template>
  <div class="apiscopeDrawer">
    <el-drawer :visible.sync="isDrawer" size="50%" title="接口权限配置" @close="_close">
      <avue-crud
        ref="crud"
        :data="data"
        :option="option"
        :search.sync="searchForm"
        :table-loading="loading"
        @search-change="handleSearchChange"
        @row-save="handleSave"
        @row-update="handleUpdate"
        @row-del="handleDel"
      >

        <template slot="menu" slot-scope="{ row,size }">
                    <span class="diy-btn ml10">
                            <i class="el-icon-edit"></i>
                            <span class="ml8" @click="handelEdit(row)">编辑</span>
                        </span>

          <span v-if="!row.admin" class="diy-btn ml10">
                            <i class="el-icon-delete"></i>
                            <span class="ml8" @click="handleRowDel(row)">删除</span>
                        </span>
        </template>
        <template slot="nameForm" slot-scope="{row}">
          <el-autocomplete
            v-model="form.name"
            :fetch-suggestions="querySearch"
            class="inline-input"
            placeholder="请输入权限名称"
            style="width: 375px;"
            @select="handleSelect"
          ></el-autocomplete>
        </template>

        <template slot="routeForm" slot-scope="{ row }">
          <input v-model="form.route" class="diy-input" placeholder="请输入权限路径" style="width: 375px;"></input>
        </template>
      </avue-crud>
    </el-drawer>
  </div>
</template>

<script>
import noPage from '@/mixins/noPage'

export default {
  mixins: [noPage],
  props: {
    isDrawer: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  watch: {
    params: {
      handler(nVal) {
        this.searchForm.menuId = nVal.id
        this.getData(this.searchForm)
      },
      deep: true,
    },
  },
  data() {
    return {
      searchForm: {},
      form: {},
      urls: {
        0: 'permission',
        1: 'apiScope',
        2: 'findAll',
      },

      data: [],
      option: {
        ...window.avueCrud,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: true,
        defaultExpandAll: true,
        align: 'left',
        searchMenuSpan: 5,
        dialogWidth: '30%',
        column: [
          {
            label: '接口名称',
            prop: 'apiName',
            search: true,
            width: 200,
            row: true,
            span: 24,
            searchSpan: 8,
            formslot: true,
            placeholder:'示例值(用户列表接口)',
            rules: [
              {
                required: true,
                message: '请输入接口名称',
                trigger: 'blur',
                validator: (rule, value, cb) => {
                  if (this.form.name === '') {
                    cb(new Error('请输入接口名称'))
                  } else {
                    cb()
                  }
                }
              },
            ],
          },
          {
            label: '接口Url',
            prop: 'apiUrl',
            row: true,
            span: 24,
            placeholder:'示例值(/user/list)',
            rules: [
              {
                required: true,
                message: '请输入接口Url',
                trigger: 'blur',
                validator: (rule, value, cb) => {
                  if (this.form.route === '') {
                    cb(new Error('请输入接口Url'))
                  } else {
                    cb()
                  }
                }
              },
            ],
          },
          {
            label: '菜单ID',
            prop: 'menuId',
            search: true,
            width: 200,
            row: true,
            span: 24,
            searchSpan: 8,
            placeholder:'示例值(2)',
            rules: [
              {
                required: true,
                message: '请输入菜单ID',
                trigger: 'blur',
              },
            ],
          },

        ],
      },
      apisName: [],
    }
  },
  methods: {
    /**
     * 获取数据完成回调
     * @param resData 接口返回的data
     * @returns {Promise<void>}
     */
    async dataCallBack(resData) {
      this.data = resData.row
    },

    async handleUpdate(row, index, done,d) {
      try {
        const {code} = await this.$api.permission.apiScope.update(row.id, {
          bduss: row.bduss,
          name: row.name,
          isUsing: row.isUsing,
          stoken: row.stoken,
          status: row.status,
          isLose: row.isLose
        })
        if (code === 200) {
          this.getData(this.searchForm)
          this.$notify({
            message: '更改成功',
            type: 'success',
            duration: 2000,
          })
        }
        done()
      }catch (e) {
        d()
      }
    },

    async handleSave(row, done,d) {
      try {
        const {code, msg} = await this.$api.permission.apiScope.create(row)
        if (code === 200) {
          this.getData(this.searchForm)
          this.$notify({
            message: msg || '创建成功',
            type: 'success',
            duration: 2000,
          })
        }
        done()
      } catch (e) {
        d()
      }
    },

    async handleDel(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const {code} = await this.$api.permission.apiScope.remove(row.id)
          if (code === 200) {
            this.getData(this.searchForm)
            this.$notify({
              message: '删除成功',
              type: 'success',
              duration: 2000,
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //关闭
    _close() {
      this.$emit('update:isDrawer', false)
    },
  },
}
</script>
<style lang='scss' scoped>
.apiscopeDrawer {
}
</style>
